<template>
  <div>
    <div class="top">
      <p>温湿度管理</p>
    </div>

    <div class="selects">
      <el-row>
        <el-form :model="requestParam" label-width="150px">
          <el-col :span="8">
            <el-form-item label="温湿度设备名称：">
              <el-input v-model="requestParam.temp_name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温湿度设备编码：">
              <el-select v-model="requestParam.temp_sn" placeholder="全部" clearable>
                <el-option v-for="(item, index) in tempSns" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="绑定状态：">
              <el-select v-model="requestParam.bind_status" placeholder="全部" clearable>
                <el-option label="已绑定" value="1"></el-option>
                <el-option label="未绑定" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机器人：">
              <el-select v-model="requestParam.dog_sn" placeholder="全部" clearable>
                <el-option v-for="(item) in robots" :key="item.dog_sn" :label="item.dog_name"
                  :value="item.dog_sn"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">
              <el-date-picker v-model="time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']" @change="changeTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-col>
          <el-col :span="24">
            <el-button type="primary" @click="createHumi" icon="el-icon-plus">新增温湿度设备</el-button>
          </el-col>
        </el-form>
      </el-row>

    </div>

    <el-row>
      <el-table :data="tableData.list" height="480" :highlight-current-row="true" border
        :header-cell-style="{ background: '#f5f5f5' }">
        <el-table-column type="index" label="序号" align="center" width="55">
        </el-table-column>
        <el-table-column prop="temp_name" label="温湿度设备名称" align="center">
        </el-table-column>
        <el-table-column prop="temp_sn" label="温湿度设备编码" align="center">
        </el-table-column>
        <el-table-column prop="bindStatusName" label="绑定状态" align="center">
        </el-table-column>
        <el-table-column prop="dog_name" label="所属机器人" align="center">
        </el-table-column>
        <el-table-column prop="temp" label="当前温度" align="center">
        </el-table-column>
        <el-table-column prop="humi" label="当前湿度" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
        <el-table-column prop="created_at" width="200" label="创建时间" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center" width="350">
          <template slot-scope="scope">
            <!-- <el-button type="text"
                       @click="preview()" slot="reference">预览</el-button> -->
            <el-button type="text" @click="modify(scope.row)">修改</el-button>
            <el-button type="text" @click="unbinding(scope.row)">解绑</el-button>
            <el-button type="text" @click="bind(scope.row)">绑定</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>

          </template>

        </el-table-column>
      </el-table>
      <div class="footer_custom">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="requestParam.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total_count" background align="center">
        </el-pagination>
      </div>
    </el-row>
    <!-- 新增温湿度设备 -->
    <el-dialog title="新增温湿度设备" :visible.sync="editHumiDialogVisible" width="30%">

      <el-form ref="editHumiForm" :model="editHumiForm" label-width="150px" :rules="rules">
        <el-form-item label="温湿度设备名称：" prop="temp_name">
          <el-input placeholder="请输入" v-model="editHumiForm.temp_name"></el-input>
        </el-form-item>
        <el-form-item label="温湿度设备编码：" prop="temp_sn">
          <el-input v-model="editHumiForm.temp_sn" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="editHumiForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editHumiDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHumi">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 绑定温湿度设备 -->
    <el-dialog title="绑定温湿度设备" :visible.sync="tempDialogVisible" append-to-body custom-class="custom_dialog" width="60%">
      <div class="dialog_filter">
        <div class="item">
          <span class="label">机器人名称：</span>
          <el-input v-model="robotDialogFilter.dog_name" placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <span class="label">机器人编号：</span>
          <el-input v-model="robotDialogFilter.dog_sn" placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <el-button type="primary" icon="el-icon-search" @click="getRobotNotBindList">查询</el-button>
        </div>
      </div>
      <div class="table">
        <customer-table :tableInfo="dialogTableInfo" :selection="true" @handleSelectionChange="handleSelectionChange"></customer-table>
      </div>
      <el-pagination :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, prev, pager, next, jumper"
        :total="dialogTableInfo.total" @current-change="handleDialogCurrentChange">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confrimBindTemp">确 定</el-button>
        <el-button @click="tempDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// 单选表格
import customerTable from "@/pages/Robot/components/CustomerSingleSelectTable.vue";
import customFooter from "@/pages/Robot/components/CustomFooter.vue";
import { RobotApi } from '@/services/PersonalCenter'
import moment from 'moment'
export default {
  name: "Camera",
  components: {
    customerTable,
    customFooter
  },
  props: {
    videoURL: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      robotDialogFilter: {
        dog_sn: '',
        dog_name: '',
        flag: 2,
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      tempSns: [],
      robots: [],
      requestParam: {
        bind_status: '',
        start_time: '',
        end_time: '',
        temp_name: '',
        temp_sn: '',
        dog_sn: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      bindTempid: '',
      bindTemps: [],
      dialogTableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "机器人名称",
            prop: "dog_name",
            width: '200'
          },
          {
            label: "机器人编号",
            prop: "dog_sn",
            width: '200'
          },
          {
            label: "机器人类型",
            prop: "dog_type",
            width: '200'
          },
          {
            label: "机器人型号",
            prop: "dog_model",
            width: '200'
          },
          {
            label: "是否绑定温湿度设备",
            prop: "state",
            width: '200'
          },
        ],
        data: [],
        total: 0,
      },
      visiblepop: false,
      tempDialogVisible: false,
      time: [],
      currentPage: 1,
      editHumiDialogVisible: false,
      cameraIndexCode: 'da5c318880fe40138b385df18897dc73',
      tableData: {
        list: [],
        page: 1,
        total_count: 1
      },
      editHumiForm: {
        temp_name: '',
        temp_sn: '',
        remark: ''
      },
      rules: {
        temp_name: [
          { required: true, message: '请输入温湿度设备名称', trigger: 'blur' }
        ],
        temp_sn: [
          { required: true, message: '请输入温湿度设备编码', trigger: 'blur' }
        ]
      },
      recentVal: 0,//默认为老平台
      showVideoFlag: true,
      playCount: 0,//播放的次数；             
    }
  },
  created() {
    this.getRobotNameBox();
    this.getTempSnBox();
    this.getList()
  },
  mounted() {

  },
  methods: {
    changeTime(val) {
      this.requestParam.start_time = val[0]
      this.requestParam.end_time = val[1]
    },
    getRobotNameBox() {
      RobotApi.getRobotNameBox().then(res => {
        if (res.code == 0) {
          this.robots = res.data.list;
        }
      })
    },
    getTempSnBox() {
      RobotApi.getTempSnBox().then(res => {
        if (res.code == 0) {
          this.tempSns = res.data.list;
        }
      })
    },
    getRobotNotBindList() {
      RobotApi.getRobotNotBindList({
        params: this.robotDialogFilter
      }).then(res => {
        if (res.code == 0) {
          res.data.list.forEach((item) => {
            item.state = '未绑定'
          })
          this.dialogTableInfo.data = res.data.list;
          this.dialogTableInfo.total = Number(res.data.total_count);
        }
      })
    },
    handleDialogCurrentChange(page) {
      this.robotDialogFilter.page = page;
      this.getRobotNotBindList();
    },
    // 获取温湿度列表
    getList() {
      RobotApi.getTempList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
          this.tableData.list.map((item) => {
            item.created_at = moment(item.created_at).format('YYYY-MM-DD HH:mm:ss')
            item.bindStatusName = item.bind_status == 1 ? '已绑定' : '未绑定'
          })
        }
      })
    },
    handleSizeChange(page_size) {
      this.requestParam.page_size = page_size
      this.requestParam.page = 1
      this.getList()

    },
    handleCurrentChange(page) {
      this.requestParam.page = page
      this.getList()
    },
    close() {
      this.visiblepop = false
    },
    openDown() {
      this.visiblepop = !this.visiblepop
    },
    bind(row) {
      this.bindTempid = row.temp_id;
      this.getRobotNotBindList();
      this.tempDialogVisible = true
    },
    createHumi() {
      this.editHumiForm = {
        temp_name: '',
        temp_sn: '',
        remark: ''
      }
      this.editHumiDialogVisible = true
    },
    modify(row) {

      this.editHumiForm = {
        temp_id: row.temp_id,
        temp_name: row.temp_name,
        temp_sn: row.temp_sn,
        remark: row.remark
      }
      this.editHumiDialogVisible = true
    },

    // 编辑温湿度设备
    editHumi() {
      this.$refs.editHumiForm.validate((valid) => {
        if (valid) {
          RobotApi.setTemps({
            data: this.editHumiForm
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('编辑成功')
              this.editHumiDialogVisible = false
              this.getList()
              this.getTempSnBox();
            }
          })
        }
      })
    },
    reset() {
      this.time = []
      this.requestParam = {
        bind_status: '',
        start_time: '',
        end_time: '',
        temp_name: '',
        temp_sn: '',
        dog_sn: '',
        is_page: 1,
        page: 1,
        page_size: 10
      }
      this.getList();
    },
    handleSelectionChange(val) {
      this.bindTemps = val;
    },
    confrimBindTemp() {
      if (this.bindTemps.length == 0) {
        this.$message.error('请选择机器人进行绑定')
        return
      }
      if (this.bindTemps.length > 1) {
        this.$message.error('只能选择一个机器人进行绑定')
        return
      }
      let dog_sn = this.bindTemps[0].dog_sn;
      RobotApi.operateTemp({
        params: {
          temp_id: this.bindTempid,
          flag: 1,
          dog_sn: dog_sn
        }
      }).then(res => {
        if (res.code == 0) {
          this.$message.success('绑定成功')
          this.tempDialogVisible = false
          this.getList();
          this.bindTempid = '';
          this.bindTemps = [];
        }
      })
    },
    del(row) {
      this.$confirm('确定删除此温湿度设备？', '删除温湿度设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        RobotApi.operateTemp({
          params: {
            temp_id: row.temp_id,
            flag: 3
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.getList()
            this.getTempSnBox();
          }
        })
      }).catch(() => {

      });
    },
    unbinding(row) {
      this.$confirm('确定解除绑定此温湿度设备？', '解绑温湿度设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        RobotApi.operateTemp({
          params: {
            temp_id: row.temp_id,
            flag: 2
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('解绑成功!')
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        });
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);

  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.selects {
  margin: 15px 0;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  padding-bottom: 20px;

  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

.preview-title {
  width: 100%;
  height: 50px;
  background-color: rgba(102, 102, 102, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  color: #409eff;

  .el-icon-close {
    color: #7f7f7f;
    font-size: 20px;
  }
}

.preview {
  width: 861px;
  height: 483px;
}

/deep/ .el-dialog__header {
  text-align: center;
  flex: 1;
  height: 60px;
  line-height: 30px;
  background: #1890ff;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

/deep/ .el-dialog__close {
  color: #ffffff;
}

/deep/ .el-dialog__footer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0px 20px 20px;
}

/deep/ .el-row {
  padding: 0 20px;
}

/deep/ .el-dialog__body {
  padding: 30px 20px 20px 20px;
}
</style>
<style lang="scss">
.custom_dialog {
  .el-dialog__header {
    padding: 18px;
    text-align: center;
    background-color: #1890ff;

    .el-dialog__close,
    .el-dialog__title {
      color: white;
      font-weight: bold;
      font-size: 18px;
    }
  }

  .dialog_filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      display: flex;
      align-items: center;
      width: 33%;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 100px;
        text-align: end;
      }

      .el-input {
        flex: 1;
      }

      .el-button {
        margin-left: 50px;
      }
    }
  }

  .table {
    padding-top: 30px;
  }

  .el-dialog__footer {
    text-align: center;
    // padding: 20px 0;

    .el-button--primary {
      margin-left: 50px;
    }
  }
}

.message-popover {
  padding: 0 !important;
  position: fixed !important;
  top: 50% !important;
  left: 54% !important;
  transform: translate(-50%, -50%) !important;

  .popper__arrow {
    display: none !important;
  }
}
</style>